<script setup>
import {ref} from 'vue'
import TitleComponent from "@/components/TitleComponent.vue";
import router from "@/router/index.js";
import {generateResultByAI, saveGenerateResultList} from "@/api/result.js";
import {Message} from "@arco-design/web-vue";
import TokenNumComponent from "@/components/TokenNumComponent.vue";

const generateForm = ref({
  appId: '',
  resultNum: null,
  model: 625,
  platform: 0
})
const generateFormRules = ref({
  resultNum: [{required: true, message: '请输入数量', trigger: 'blur'},
    {type: 'number', min: 1, max: 16, message: '数量范围为1 - 16', trigger: 'blur'}],
  model: [{required: true, message: '请选择模型', trigger: 'change'}],
})
const generateFormRef = ref()

const modelOptions = [
  {
    label: "DeepSeek-v3",
    value: 917,
  },
  {
    label: "DouBao-Pro-32k",
    value: 420,
  },
  {
    label: "ChatGLM4",
    value: 625,
  },
  {
    label: "ChatGLM4v",
    value: 331,
  },
];
const platformListOfZhiPu = ref([
  625,
  331
])

const platformListOfVolcano = ref([
  917,
  420
])

const resultList = ref([])
const columns = [
  {
    title: '结果名称',
    dataIndex: 'resultName',
    ellipsis: true,
    tooltip: true,
    fixed: 'left'
  },
  {
    title: '结果描述',
    dataIndex: 'resultDesc',
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '结果属性集合',
    dataIndex: 'resultProp',
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '结果得分范围',
    dataIndex: 'resultScoreRange',
    ellipsis: true,
    tooltip: true,
  },
];
const generateLoading = ref(false)
const tokenNumRef = ref()

const saveForm = ref({
  appId: '',
  list: []
})

const onclickGenerate = () => {
  generateForm.value.appId = router.currentRoute.value.params.id
  if (generateForm.value.appId === null) {
    Message.error('参数错误')
    return
  }
  if (platformListOfZhiPu.value.includes(generateForm.value.model)) {
    generateForm.value.platform = 0
  } else if (platformListOfVolcano.value.includes(generateForm.value.model)) {
    generateForm.value.platform = 1
  }
  generateFormRef.value.validate(async valid => {
    if (!valid) {
      Message.info('AI生成中请勿离开界面')
      generateLoading.value = true
      try {
        const res = await generateResultByAI(generateForm.value)
        if (res.data.code === 1) {
          resultList.value = res.data.data
          tokenNumRef.value.getUserTokenNum()
          Message.success('生成成功')
        } else {
          Message.error('生成失败,请重试')
        }
      } catch (error) {
        console.error(error)
      } finally {
        generateLoading.value = false
      }
    } else {
      console.log('表单校验失败');
    }
  });
}

const onclickSave = () => {
  saveForm.value.appId = router.currentRoute.value.params.id
  saveForm.value.list = resultList.value
  if (saveForm.value.appId === null || saveForm.value.list.length === 0) {
    Message.error('参数错误')
    return
  }
  saveGenerateResultList(saveForm.value)
    .then(res => {
      if (res.data.code === 1) {
        Message.success('保存成功')
        router.back()
      } else {
        Message.error('保存失败')
      }
    })
    .catch(error => {
      console.error(error)
    })
}
</script>

<template>
  <div id="ai-scoring-page">
    <a-spin dot :loading="generateLoading" tip="正在生成中... " class="spin">
      <a-card class="card">
        <title-component title-text="AI生成评分结果"></title-component>
        <a-form :model="generateForm" :rules="generateFormRules" ref="generateFormRef" layout="inline">
          <a-form-item hide-label field="resultNum" validate-trigger="blur">
            <a-input-number v-model="generateForm.resultNum" placeholder="请输入需要的结果数量" :max="16"
                            :min="1"></a-input-number>
          </a-form-item>
          <a-form-item hide-label field="model" validate-trigger="change">
            <a-tooltip content="选择一个大模型" background-color="#3491FA">
              <a-select v-model="generateForm.model" placeholder="请选择模型"
              >
                <a-option v-for="item in modelOptions" :key="item.value" :value="item.value">{{ item.label }}
                </a-option>
              </a-select>
            </a-tooltip>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="onclickGenerate" style="margin-right: 10px">生成</a-button>
            <a-button type="primary" :disabled="resultList.length === 0" @click="onclickSave">保存</a-button>
          </a-form-item>
        </a-form>
        <token-num-component ref="tokenNumRef"></token-num-component>
        <div class="result-container">
          <a-table size="medium" :scroll="{x: 800}" :columns="columns" :data="resultList" stripe :pagination="false"/>
        </div>
      </a-card>
    </a-spin>
  </div>
</template>

<style scoped>
.spin {
  width: 100%;
}

.card {
  margin-top: 20px;
  min-height: 70vh;
}

.result-container {
  margin-top: 10px;
}
</style>
